<template>
  <view>
    <u-action-sheet :actions="actions" :show="actionShow" title="请选择对当前文章进行操作" round="24rpx" @select="actionSelect" @close="actionClose" :closeOnClickOverlay="true" :closeOnClickAction="true"></u-action-sheet>
    <view class="blog" v-for="(item,index) in listInfo" :key="index">
      <!-- 头像 -->
      <view class="header">
        <view class="header-info">
          <image style="width: 1.5rem;height: 1.5rem;border-radius: 50%;" :src="item.user_id[0].avatar_file.url" mode="aspectFit"></image>
          <view style="font-size: 28rpx;color: #333;">
            {{item.user_id[0].nickname}}
          </view>
          <view style="font-size:24rpx;color: #999;">
            <uni-dateformat style="letter-spacing: 3rpx;" :date="item.publish_date" format="MM月dd hh:mm" :threshold="[60000,3600000*24*30]"></uni-dateformat>
          </view>
        </view>
        <view class="header-more" @click="onAction(item)">
          <text>...</text>
        </view>
      </view>
      <!-- 标题 -->
      <view class="title" @click="goDetail(item._id)">
        {{item.title}}
      </view>
      <!-- 内容 -->
      <view class="content" @click="goDetail(item._id)">
        <text>
          {{item.description}}
        </text>
      </view>
      <!-- 图片 -->
      <view class="image">
        <image :src="i" mode="aspectFill" v-for="(i,indx) in item.picurls" :key="indx" @click="preview(item,indx)"></image>
      </view>
      <!-- 评论 -->
      <view class="info">
        <view class="num flex" @click="goDetail(item._id)">
          <u-icon name="eye" color="#999" size="20"></u-icon>
          <text>{{item.view_count}}</text>
        </view>
        <view class="comment flex" @click="goDetail(item._id)">
          <u-icon name="chat" color="#999" size="20"></u-icon>
          <text>{{item.comment_count}}</text>
        </view>
        <view class="like flex" @click="like(item)">
          <u-icon name="thumb-up" :color="item.likeStatus ?  '#0199fe' :'#999'" size="20"></u-icon>
          <text :style="{color:item.likeStatus ?  '#0199fe' :'#999'}">{{item.like_count}}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { updateLike } from "../../utils/tools";
import { store } from "../../uni_modules/uni-id-pages/common/store";
const db = uniCloud.database();
export default {
  name: "blog-items",
  data() {
    return {
      actionShow: false,
      actions: [
        {
          name: "修改",
          color: "#333",
          disabled: true,
          type: "edit"
        },
        {
          name: "删除",
          color: "red",
          disabled: true,
          type: "del"
        }
      ],
      articleId: ""
    };
  },
  props: {
    listInfo: {
      type: Array,
      require: false
    }
  },
  created() {
    // console.log(this.listInfo)
  },
  methods: {
    // 进行节流
    likeUpdate() {
      uni.$u.throttle(this.like, 2000);
    },
    // 用户点赞
    async like(item) {
      if (store.hasLogin) {
        item.likeStatus
          ? item.like_count--
          : item.like_count++;

        item.likeStatus = !item.likeStatus;
      }

      // 判断当前用户是否点赞
      updateLike(item._id);

    },
    actionUpdate() {
      uni.navigateTo({
        url: "/pages/edit/edit?id=" + this.articleId
      });
    },
    actionClose() {
      this.actionShow = false;
    },
    // 菜单操作
    async actionSelect(e) {
      if (e.type == "del") {
        let { result } = await db
          .collection("quanzi_article")
          .doc(`${this.articleId}`)
          .update({
            delStatus: true
          });
        if (result.errCode == 0) {
          this.listInfo.forEach((value, index) => {
            if (value._id == this.articleId) {
              this.listInfo.splice(index, 1);
            }
          });
          uni.showToast({
            title: "删除成功"
          });
        } else {
          uni.showToast({
            title: "删除失败"
          });
        }
      } else {
        this.actionUpdate();
      }
    },
    // 弹出选项菜单
    onAction(e) {
      this.articleId = e._id;
      this.actionShow = true;
      let { uid } = uniCloud.getCurrentUserInfo();
      if (e.user_id[0]._id == uid || this.uniIDHasRole("admin")) {
        this.actions.forEach(item => {
          item.disabled = false;
        });
      }
    },
    // 点击之后时当前图片放大
    preview(item, index) {
      uni.previewImage({
        urls: item.picurls,
        current: index
      });
    },
    // 跳转详情页
    goDetail(id) {
      uni.navigateTo({
        url: "/pages/detail/detail?id=" + id
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.blog {
  margin-bottom: 40rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .header-info {
      display: flex;
      justify-content: center;
      align-items: center;

      view {
        margin-left: 20rpx;
      }
    }

    .header-more {
      letter-spacing: 6rpx;
    }
  }

  .title {
    margin-top: 30rpx;
    font-weight: bold;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .content {
    color: #999;
    font-size: 26rpx;
    margin-top: 20rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .image {
    margin: 30rpx 20rpx;

    image {
      width: 200rpx;
      height: 200rpx;
      border-radius: 8rpx;
      margin: 2rpx 5rpx;
    }
  }

  .info {
    display: flex;
    justify-content: space-around;
    align-items: center;

    text {
      font-size: 26rpx;
      color: #999;
      margin-left: 10rpx;
    }
  }

  .flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
</style>
